<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
    <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <title>Hello, world!</title>
</head>
<body>
<!--使用前端框架，就是希望开发速度快一点，但是要学习框架中组件的使用，也是一种学习成本，要学以致用-->
<h1>Hello, world!</h1>
<!--看到一个又简单又好用的component，card,它是比container更具体的容器了，head,body,footer都有了，只需要我把内容填充进去就可以了
card-group布局好像也很常见。
https://getbootstrap.com/docs/4.2/components/card/
-- -->
<div class="card-group">
    <div class="card">
        <img alt="..." class="card-img-top" src="...">
        <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional
                content. This content is a little bit longer.</p>
            <p class="card-text">
                <small class="text-muted">Last updated 3 mins ago</small>
            </p>
        </div>
    </div>
    <div class="card">
        <img alt="..." class="card-img-top" src="...">
        <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
            <p class="card-text">
                <small class="text-muted">Last updated 3 mins ago</small>
            </p>
        </div>
    </div>
    <div class="card">
        <img alt="..." class="card-img-top" src="...">
        <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional
                content. This card has even longer content than the first to show that equal height action。</p>
            <p class="card-text">
                <small class="text-muted">Last updated 3 mins ago</small>
            </p>
        </div>
    </div>
</div>


<script src="../jquery-3.3.1.min.js"></script>

<script src="../bootstrap/js/bootstrap.js"></script>
</body>
</html>